<!--
 * @Author: 宋绍华
 * @Date: 2024-11-11 17:16:16
 * @LastEditors: 宋绍华
 * @LastEditTime: 2025-01-07 14:53:32
 * @FilePath: \sr_system_manager_ui\src\views\project\components\Details\index.vue
 * @Description: 项目详情
-->
<template>
  <div class="publish-notices">
    <div class="title">
      <span>项目名称--111</span>
      <div>
        <el-button link type="primary" @click="publish">提交申报</el-button>
        <el-button link type="primary" @click="publish">编辑</el-button>
        <el-button link type="primary" @click="publish">删除</el-button>
      </div>
    </div>
    <div class="flex items-center mt-24px ml-20px">
      <span v-for="item in btnList" :key="item.id" :class="{ 'btn-item-active': btnActive === item.id }"
        @click="toggleModule(item.id)" class="btn-item">{{ item.label }}</span>
    </div>
    <div class="publish-notices-content">
      <!-- <Edit v-if="btnActive === 0" />
      <ProjectMember v-else-if="btnActive === 1" />
      <Cooperative v-else-if="btnActive === 2" />
      <ProjectBudget v-else-if="btnActive === 3" />
      <ProjectDoc v-else-if="btnActive === 4" />
      <Review v-else /> -->
    </div>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog title="添加项目分类" v-model="open" width="500px" append-to-body>
      <el-form>
        <el-form-item label="项目分类名称" prop="remark">
          <el-input :maxlength="50" v-model="typeName" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="closeModal">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
// import Edit from './Edit.vue';
// import ProjectMember from './ProjectMember.vue';
// import Cooperative from './Cooperative.vue';
// import ProjectBudget from './ProjectBudget.vue';
// import ProjectDoc from './ProjectDoc.vue';
import Review from './Review.vue';

const btnList = ref([
  {
    label: '基本信息',
    id: 0
  },
  {
    label: '项目成员',
    id: 1
  },
  {
    label: '合作单位',
    id: 2
  },
  {
    label: '项目预算',
    id: 3
  },
  {
    label: '项目文档',
    id: 4
  },
  {
    label: '审核过程',
    id: 5
  },
])
const btnActive = ref(0)  // 当前激活的按钮
const open = ref(false);
const typeName = ref('');

const route = useRoute()
const form = ref({
  notices: '',
  noticeContent: ''
})

const save = () => {
  console.log('保存')
}

const publish = () => {
  console.log('发布')
}

// 设置日期
const disabledDate = (time) => {
  const date = new Date(time)
  return date.getTime() < Date.now() - 8.64e7
}

const toggleModule = (id) => {
  btnActive.value = id
}

// 关闭弹窗
const closeModal = () => {
  typeName.value = '';
  open.value = false;
}

const submitForm = () => {
  console.log('提交')
}

onMounted(() => {
  if (route.query.type) {
    const type = Number(route.query.type)
    btnActive.value = isNaN(type) ? 0 : type
  }
})

</script>

<style lang="scss" scoped>
.publish-notices {
  --at-apply: bg-white h-full;

  .title {
    --at-apply: text-20px font-bold border-b border-#E5E6EB py-16px pl-20px border-b-solid flex justify-between;
  }

  &-content {
    --at-apply: p-30px;
  }
}

.btn-item {
  --at-apply: inline-block text-14px px-16px py-5px rounded-100px bg-#F2F3F5 color-#4E5969 mr-12px cursor-pointer;

  &-active {
    --at-apply: text-#165DFF;
  }
}
</style>